<template>
  <div>
    <!-- 退款审批  ==> 退款审批详情-->
    <!--   :pagination="pagination"
      @change="handleTableChange" -->
    <div style="font-weight: 600; font-size: 20px; margin-bottom: 10px">
      房间信息
    </div>
    <a-divider />
    <a-table
      :columns="columns1"
      :data-source="dataSource1"
      bordered
      size="middle"
      :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
    >
    </a-table>
    <div
      style="
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      "
    >
      退款信息
    </div>
    <a-divider />
    <a-table
      :columns="columns2"
      :data-source="dataSource1"
      bordered
      size="middle"
      :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
    >
    </a-table>

    <div
      style="
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      "
    >
      审批
    </div>
    <a-divider />
    <a-steps
      v-model:current="current"
      :items="items"
      @change="onChangeStep"
    ></a-steps>

    <!-- 步骤-审批意见 -->
    <a-modal
      v-model:open="isModalVisible"
      :title="openModalName"
      :width="500"
      :footer="null"
    >
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed, h, watch } from 'vue';
import { getrefundApprovaldById } from '#/api/core/planAudit';
import { message } from 'ant-design-vue';
const props = defineProps({
  rowData: {
    type: Object,
    default: () => {},
  },
});
const datas = ref();

const columns1 = [
  {
    title: '热力卡号 ',
    dataIndex: 'alipayConsNo',
    key: 'alipayConsNo',
    align: 'center',
  },
  {
    title: '用户地址',
    dataIndex: 'houseAddress',
    key: 'houseAddress',
    align: 'center',
  },
  {
    title: '申请人',
    dataIndex: 'applicantName',
    key: 'applicantName',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'applicationTime',
    key: 'applicationTime',
    align: 'center',
  },
  {
    title: '申请原因',
    dataIndex: 'refundCause',
    key: 'refundCause',
    align: 'center',
  },
];
const columns2 = [
  {
    title: '收费期',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
  },
  {
    title: '实收面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    align: 'center',
  },
  {
    title: '应收全费金额',
    dataIndex: 'normalReceivable',
    key: 'normalReceivable',
    align: 'center',
  },
  {
    title: '应收基本费金额',
    dataIndex: 'heatWasteReceivable',
    key: 'heatWasteReceivable',
    align: 'center',
  },
  {
    title: '实收金额',
    dataIndex: 'realReceiveToal',
    key: 'realReceiveToal',
    align: 'center',
  },
  {
    title: '退款金额',
    dataIndex: 'refundTotal',
    key: 'refundTotal',
    align: 'center',
  },
  {
    title: '可退金额',
    dataIndex: 'shouldRefund',
    key: 'shouldRefund',
    align: 'center',
  },
  {
    // refundDisposition
    title: '退款转入预收款',
    dataIndex: '',
    key: '',
    align: 'center',
    customRender: ({ record }) => {
      if (record.refundDisposition === '预收账户') {
        return record.refundTotal;
      }
      return '0';
    },
  },
  {
    title: '退款去向',
    dataIndex: 'refundDisposition',
    key: 'refundDisposition',
    align: 'center',
  },
  {
    title: '缴纳方式',
    dataIndex: 'refundWay',
    key: 'refundWay',
    align: 'center',
  },
  {
    title: '收费人',
    dataIndex: 'receiver',
    key: 'receiver',
    align: 'center',
  },
  {
    title: '退费时间',
    dataIndex: 'refundDate',
    key: 'refundDate',
    align: 'center',
  },
  // {
  //   title: '缴费单位',
  //   dataIndex: 'index',
  //   key: 'index',
  //   width: 80,
  //   align: 'center',
  // },
  {
    title: '退款状态',
    dataIndex: 'approvalStatus',
    key: 'approvalStatus',
    align: 'center',
  },
];
const dataSource1 = ref([]);
// 获取表格数据
const getTableData = async () => {
  dataSource1.value = [];
  const res = await getrefundApprovaldById(datas.value.id);
  console.log(res);
  if (res) {
    dataSource1.value.push(res);
  } else {
    message.error('暂无数据');
  }
};

// 步骤
const current = ref<number>(0);
// 打开审批意见
const isModalVisible = ref(false);
const openModalName = ref('');
const items = ref([
  {
    title: '基层站主管',
  },
  {
    title: '子公司主管领导',
  },
  {
    title: '省公司主管',
  },
  {
    title: '省公司经理',
  },
  {
    title: '省公司财务领导',
  },
  {
    title: '省公司法务领导',
  },
  {
    title: '省公司主管领导',
  },
  {
    title: '总公司业务主管',
  },
  {
    title: '省公司总部财务',
  },
  {
    title: '省公司总部法规',
  },
  {
    title: '总公司主管领导',
  },
]);
const onChangeStep = (value: number) => {
  console.log('onChange: ', items.value[value].title);
  openModalName.value = items.value[value].title;
  isModalVisible.value = true;
};

watch(
  () => props.rowData,
  (newVal1) => {
    console.log(newVal1);
    datas.value = newVal1;
    getTableData();
  },
  { immediate: true, deep: true },
);
</script>

<style scoped></style>
